<template>
  <div class="list-container">
    <!--
      上拉加载交互
      核心思路: 滑动页面的时候如果到达了底部 自动发起下一页数据的请求 拿到数据和已经存在的数据列表
      做拼接形成一个新的list列表 如此反复

      vant上拉加载组件
      1. loading: 是否正在进行上拉加载数据中 true加载中 如果为false就会再次进行事件触发
      2. finished: 数据是否全部加载完毕 如果没有数据了 需要我们手动设置为true 一旦设置为true
      上拉加载更多的交互会彻底结束
      3. finished-text: 当完全没有数据时要显示的提示文案
      4. @load: 事件 会在滑动到底部的时候自动触发这个事件 我们的新数据请求 数据拼接等核心逻辑代码都会写到这里
      5. immediate-check: 是否开启立刻检测 默认值为true 一上来load事件会立刻执行一次

      下拉刷新交互
      核心思路: 下滑到了最顶部 继续往下 触发下拉刷新机制 -> 更新当前tab下最新的列表 以当前的时间戳作为参数
      获取数据更新列表

     -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-test="没有更多了"
      @load="onLoad"
      :immediate-check="false"
    >
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <article-list-item
          v-for="article in articleList"
          :key="article.art_id"
          :article-data="article"
          @click.native="goDetail(article.art_id)"
        />
        <!--
          当我们绑定一个事件到组件身上时 @click 依旧会被识别为自定义事件
          $emit('click')
          native -> vue帮助我们自动把这个click绑定到组件的最外层的根元素上
         -->
      </van-pull-refresh>
    </van-list>
  </div>
</template>

<script>
// 1. 发送数据的组件位置 采取在article-list
// 2. list vs item
// list - 智能组件 - 和后端交互获取数据 组装木偶组件 给他们下发数据
// item - 木偶组件[UI组件] - 接受不同的数据传入显示UI效果
import ArticleListItem from './article-list-item.vue'
import { getArticleList } from '@/api/index'
export default {
  props: {
    channelId: {
      type: Number
    }
  },
  components: {
    ArticleListItem
  },
  data () {
    return {
      articleList: [],
      loading: false,
      finished: false,
      timestamp: new Date().getTime(),
      isLoading: false // 是否正在下拉刷新中
    }
  },
  methods: {
    async fetchList () {
      const res = await getArticleList({
        channelId: this.channelId,
        timestamp: this.timestamp
      })
      this.articleList = res.data.results
      this.timestamp = res.data.pre_timestamp
    },
    async onLoad () {
      console.log('上拉加载开始了')
      // 1. 调用接口获取下一页的数据
      // 核心点: 需要把上一次请求列表返回数据中的pre_timestamp存下来 作为下一页数据的请求参数
      const res = await getArticleList({
        channelId: this.channelId,
        timestamp: this.timestamp
      })
      // 2. 拿到数据之后做数据拼接
      this.articleList = [...this.articleList, ...res.data.results]
      this.timestamp = res.data.pre_timestamp
      // 3. 手动把开关loading重新设置为false 为下一次上拉加载做准备
      this.loading = false
      // 4. 自行判断当前后端是否还有数据 如果没有数据了 finished手动设置为true 彻底结束上拉加载
      if (res.data.pre_timestamp === null) {
        this.finished = true
      }
    },
    async onRefresh () {
      console.log('下拉刷新了')
      // 重新调用最新的时间戳参数接口渲染列表
      // 俩种做法: 1. 把新数据放到老数据的头上拼接起来  2. 拉最新数据列表彻底articleLis替换掉
      const res = await getArticleList({
        channelId: this.channelId,
        timestamp: new Date().getTime()
      })
      this.articleList = res.data.results
      this.timestamp = res.data.pre_timestamp
      // 把isLoading重置为false
      this.isLoading = false
    },
    goDetail (artId) {
      console.log(artId)
      this.$router.push({
        path: '/detail',
        query: {
          artId
        }
      })
    }
  },
  mounted () {
    this.fetchList()
  }
}
</script>

<style scoped>
.list-container {
  position: fixed;
  top: 44px;
  bottom: 50px;
  width: 100%;
  overflow: auto;
}
</style>
